import React, { Component } from 'react';
import '../App.less';
import  '../css/Create.less'
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import Header from  './Header'
import  Lunbo from  './Lunbo'
import  Footer from  './Footer'
import  Creater from  './Creater'
import  axios from  'axios'
@observer class Muban extends Component {
    constructor(props) {
        super(props)
        this.state={
            lingyuItems:[],
            lingyu:'',
            lingyuSon:'',
            lingyuName:'',
            paixu:0,
            show:'',
            Creates:[],
            size:'',
            total:''
        }
    }
    componentWillMount(){
        Mobx.history= this.props.history
    }
    componentDidMount(){
        // 获取领域类型
        axios.get('http://www.niuduxiu.com/pc/creativityType/getCreativityType.jhtml')
            .then((item)=>{
                Mobx.lingyuArray=item.data.data;
            })
        // 获取活动类型
        axios.get('http://www.niuduxiu.com/pc/activity/getAllActivity.jhtml')
            .then((item)=>{
                Mobx.huodongArray=item.data.data
            })
        // 获取创意
        axios.get('http://www.niuduxiu.com/creativity/findByType.jhtml?aid=-1&type='+this.state.paixu+'&cid=-1&pageNumber=1&pageSize=20&memberID=&r='+Math.random())
            .then((item)=>{
                this.setState({
                    Creates:item.data.cindex,
                    total:item.data.totalPage,
                    size:item.data.pageNumber
                },()=>{
                  if(this.state.total>this.state.size){
                      this.interval()
                  }
                })
            })
    }
    interval(){
        var interval1=setInterval(()=>{
            console.log(1)
            if((document.documentElement.scrollTop||document.body.scrollTop)-document.body.scrollHeight>=-1000){
                clearInterval(interval1)
                if(this.state.total>this.state.size){

                }else{
                    return false;
                }
              this.setState({
                  size:this.state.size+1
              },()=>{
                  this.loading()
              })
            }
        },1000)
    }
    loading(){
        if(this.state.total<this.state.size){
            return ;
        }
        axios.get('http://www.niuduxiu.com/creativity/findByType.jhtml?cid='+this.state.lingyuSon+'&type=0&aid=-1&pageNumber='+this.state.size+'&pageSize=20&memberID=&r='+Math.random())
            .then((item)=>{
                if(this.state.size===1){
                    this.setState({
                        Creates:item.data.cindex,
                        total:item.data.totalPage,
                        size:item.data.pageNumber
                    },()=>{
                        if(this.state.total>this.state.size){
                            this.interval()
                        }
                    })
                }else if(this.state.size>1){
                    console.log(this.state.size)
                    this.setState({
                        Creates:this.state.Creates.concat(item.data.cindex),
                        total:item.data.totalPage,
                        size:item.data.pageNumber
                    },()=>{
                        if(this.state.total>this.state.size){
                            this.interval()
                        }
                    })
                }
            })
    }
    getSonItems(index,item){
       this.setState({
         lingyuItems:Mobx.lingyuArray[index].children,
         lingyu:item.value,
         lingyuSon:''
       })
    }
    ClearLingyu(){
        this.setState({
            lingyuItems:[],
            lingyu:'',
            lingyuSon:''
        })
    }
    getSonSonItems(item){
        this.setState({
            lingyuSon:item.value,
            lingyuName:item.label
        })
    }
    showLingyu(){
        this.setState({
            show:true,
            name:this.state.lingyuName
        })
    }
    hideLingyu(){
        this.setState({
            show:false,
            lingyuName:this.state.name
        })
    }
    queding(){
        this.setState({
            size:1
        },()=>{
            this.loading()
        })
        this.setState({
            show:false,
        })
    }
    render() {
        let paixu='';
        if(Mobx.paixu===1){
            paixu='最新发布'
        }else if(Mobx.paixu==2){
            paixu='人气最高'
        }else{
            paixu='特别推荐'
        }
        let Creates=this.state.Creates
        return (
            <div className="App">
                <Header />
                <Lunbo />
                <div className='Create'>
                    <div className='ChooseType'>
                        <div onClick={this.showLingyu.bind(this)}>
                            <span>{this.state.lingyuName||'全部领域'}></span>
                        </div>
                       {/* <div>
                            <span>{Mobx.huodong||'全部活动'}></span>
                        </div>
                        <div>
                            <span>{paixu}></span>
                        </div>*/}
                    </div>
                    <div className='Cover' style={{'display':this.state.show?"block":'none'}}>
                        <div className='left'>
                            <button onClick={this.hideLingyu.bind(this)}>取消</button>
                            <ul>
                               <li onClick={this.ClearLingyu.bind(this)} className={!this.state.lingyu?'active':''} >全部</li>
                        {
                            Mobx.lingyuArray.map((item,index)=>{
                                return(
                                        <li key={index} onClick={this.getSonItems.bind(this,index,item)} className={this.state.lingyu==item.value?'active':''}>
                                            {item.label}
                                        </li>
                                )
                            })
                        }
                            </ul>
                        </div>
                        <div className='right'>
                            <ul>
                                {
                                   this.state.lingyuItems.map((item,index)=>{
                                        return(
                                            <li key={index} onClick={this.getSonSonItems.bind(this,item)} className={this.state.lingyuSon==item.value?'active':''}>
                                                {item.label}
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <button onClick={this.queding.bind(this)}>确认</button>
                        </div>
                    </div>
                </div>
                <Creater Creates={Creates}   />
                <Footer />
            </div>
        );
    }
}

export default Muban;
